// 项目清算管理
<template>
  <div class="projectLiquidationManagement">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称：">
        <el-input v-model="formInline.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="审核状态：">
        <el-select v-model="formInline.status" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="未审核" value="0"></el-option>
          <el-option label="审核中" value="1"></el-option>
          <el-option label="审核通过" value="2"></el-option>
          <el-option label="审核不通过" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSettlementList" id="monitorEnter">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">生成</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          align=center
          label="序号"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          align=center
          prop="projectName"
          label="项目姓名"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="projectIncome"
          label="项目营收（元）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.projectIncome | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="profit"
          label="利润率（%）"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="sumAmount"
          label="总结算金额（元）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.sumAmount | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="sumBonus"
          label="总分红金额（元）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.sumBonus | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="sumAmountStaff"
          label="结算金额（员工）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.sumAmountStaff | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="sumAmountBonus"
          label="分红金额（员工）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.sumAmountBonus | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="numberStaff"
          label="人数（员工）"
          width="150">
        </el-table-column>
        <el-table-column
          align=center
          prop="status"
          label="审核状态"
          width="150">
          <template slot-scope="scope">
            <span v-show="scope.row.status == 0">未审核</span>
            <span v-show="scope.row.status == 1">审核中</span>
            <span v-show="scope.row.status == 2">审核通过</span>
            <span v-show="scope.row.status == 3">审核不通过</span>
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="updateUserName"
          label="更新人"
          width="150">
        </el-table-column>
        <el-table-column
          align=center
          prop="updateTime"
          label="更新时间"
          width="180">
        </el-table-column>
        <el-table-column
          align=center
          fixed="right"
          width="240"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="saveSettlement(scope.row)" type="text" size="small" :disabled="scope.row.status == 0 || scope.row.status == 3 ? false: true">发起审核</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small" :disabled="scope.row.status == 0 || scope.row.status == 3 ? false: true">重新生成</el-button>
            <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
            <el-button @click="handleDel(scope.row)" type="text" size="small" :disabled="scope.row.status == 0 || scope.row.status == 3 ? false: true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
  name:'projectLiquidationManagement',
  title:'项目清算管理',
  data(){
    return {
      totalSize:0,
      pageData:{
        pageSize:10,
        pageNum:1
      },
      formInline: {
        projectName: '',
        status: ''
      },
      tableData: [],
      mainpartList:[],
      staffList:[],
      refundList:[],
    }
  },
  filters:{
    numFormat(val ){
      val += '';  
      let x = val.split('.');  
      let x1 = x[0];  
      let x2 = x.length > 1 ? '.' + x[1] : '';  
      var rgx = /(\d+)(\d{3})/;  
      while (rgx.test(x1)) {  
      x1 = x1.replace(rgx, '$1' + ',' + '$2');  
      }  
      return x1 + x2;  
    }
  },
  created(){
    this.getSettlementList()
  },
  activated(){
    this.getSettlementList()
  },
  methods:{
    onSubmit() {
      this.$router.push('/generatingLiquidation')
    },
    // 项目列表
    getSettlementList(){
      this.axios.post(api.getSettlementList,{
        projectName:this.formInline.projectName,
        status:this.formInline.status,
        pageSize:this.pageData.pageSize,
        pageNum:this.pageData.pageNum
      }).then((res)=>{
        this.tableData = res.data.data.list
        this.totalSize = res.data.data.total
      })
    },
    // 发起审核
    saveSettlement(row){
      this.axios.post(api.settlementInitiateAudit,{
        id:row.id
      }).then((res)=>{
        console.log(res)
        if(res.data.code==200){
          this.getSettlementList()
          this.$message('已经发起审核')
        }
      })
    },
    // 点击详情
    handleDetail(row){
      this.$router.push({path:'/liquidationDetail',query:{
        id:row.id
      }})
    },
    // 重生生成
    handleClick(row) {
      this.$router.push({path:'/generatingLiquidation',query:{
        id:row.id,
        projectId:row.projectId,
        projectName:row.projectName,
        projectIncome:row.projectIncome,
        profit:row.profit,
        updateUserId:row.updateUserId,
        updateUserName:row.updateUserName,
        reGenerate:1,
      }})
    },
    // 删除
    handleDel(row){
      this.$confirm('确定删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(api.delSettlementById,{
          id:row.id
        }).then((res)=>{
          this.getSettlementList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })         
      })
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getSettlementList()
    },
    handleCurrentChange(val) {
      this.getSettlementList()
    }
  }
}
</script>

<style lang='stylus'>
.projectLiquidationManagement{
  .el-pagination{
    margin-top:20px;
  }
}
</style>
